<template>
    <div class="icons">

        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="(page,index) in iconPages" :key="index">
                <div class="icons-item" v-for="item in page" :key="item.id">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.text}}</p>
                </div>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    props : [
        "iconsList"
    ],
    name : "home-icons",
    data(){
        return{
            swiperOption : {
                pagination: {
                    el: '.swiper-pagination'
                },
                loop : false
            }
        }
    },
    computed : {
        iconPages : function(){
            let result = [];
            for (var i = 0; i < Math.ceil(this.iconsList.length / 8); i++) {
                var start = i * 8;
                var end = start + 8;
                result.push(this.iconsList.slice(start, end));
            }
            return result;
        }
    },
    
}
</script>

<style scoped lang="stylus">

.icons{ width:100%; overflow :hidden; }

.icons-item{ width: 25%; float:left; }

.icons-item img{ width:1.1rem; height:1.1rem; display: block; margin: 0 auto; padding-top:0.2rem; }

.icons-item p{  margin-top: 0.08rem; text-align: center; color: #212121; font-size:0.26rem;}

.icons >>> .swiper-pagination-bullet{ width: 0.15rem; height: 0.15rem;}

.icons >>> .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 0.06rem;}

</style>


